// 组件形式路由的写法
import App from "../App";
import Home from "../views/Home";
import About from "../views/About";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
// 两种路由模式的组件:BrowserRouter(history模式)HashRouter(Hash模式)

// const baseRouter = () => {
//     return (
//         <BrowserRouter>
//             <Routes>
//                 <Route path="/App" element={<App />}>
//                     <Route path="/home" element={<Home />}></Route>
//                     <Route path="/about" element={<About />}></Route>
//                 </Route>
//             </Routes>
//         </BrowserRouter>
//     );
// };

// ()=>{reutrn()}  以上写法可以简写为 ()=>() .
// 区别在于有没有逻辑 只是为了返回一个组件 采用()=>() 有逻辑采用()=>{return()}

const baseRouter = () => (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />}>
                {/* 用户访问'/'重定向到'/home' */}
                <Route path="/" element={<Navigate to="/home" />}></Route>
                <Route path="/home" element={<Home />}></Route>
                <Route path="/about" element={<About />}></Route>
            </Route>
        </Routes>
    </BrowserRouter>
);

export default baseRouter;
